<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      th:replace="~{admin/layout :: html(title=${title}, content=~{::content})}">
<head>
    <title>新闻表单</title>
</head>
<body>
<div th:fragment="content">
    <form th:action="@{/admin/news/save}" th:object="${news}" method="post">
        <input type="hidden" th:field="*{id}" />
        
        <div class="mb-3">
            <label for="title" class="form-label">新闻标题</label>
            <input type="text" class="form-control" id="title" th:field="*{title}" required>
        </div>
        
        <div class="mb-3">
            <label for="content" class="form-label">新闻内容</label>
            <textarea class="form-control" id="content" th:field="*{content}" rows="10"></textarea>
        </div>

        <div class="row">
            <div class="col-md-6 mb-3">
                <label for="type" class="form-label">类型</label>
                <select class="form-select" id="type" th:field="*{type}">
                    <option value="扶贫政策">扶贫政策</option>
                    <option value="农产品文化故事">农产品文化故事</option>
                    <option value="助农活动新闻">助农活动新闻</option>
                    <option value="脱贫成效">脱贫成效</option>
                </select>
            </div>
            <div class="col-md-6 mb-3">
                <label for="author" class="form-label">作者</label>
                <input type="text" class="form-control" id="author" th:field="*{author}">
            </div>
        </div>
        
        <div class="mb-3">
            <label for="imageUrl" class="form-label">新闻图片</label>
            <div class="input-group">
                <input type="text" class="form-control" id="imageUrl" th:field="*{imageUrl}" readonly>
                <button type="button" class="btn btn-outline-secondary" onclick="openImageSelector()">选择图片</button>
            </div>
            <div id="selectedImagePreview" class="mt-2" style="display: none;">
                <img id="previewImg" src="" alt="预览图" style="max-width: 200px; max-height: 200px; border: 1px solid #ddd;">
            </div>
        </div>
        
        <div class="mb-3">
            <label for="status" class="form-label">状态</label>
            <select class="form-select" id="status" th:field="*{status}">
                <option value="发布">发布</option>
                <option value="草稿">草稿</option>
            </select>
        </div>
        
        <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> 保存</button>
        <a href="/admin/news" class="btn btn-secondary">取消</a>
    </form>

    <!-- 图片选择模态框 -->
    <div class="modal fade" id="imageSelectorModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">选择图片</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div id="imageGrid" class="row g-3">
                        <!-- 图片将在这里动态加载 -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        function openImageSelector() {
            // 加载图片列表
            fetch('/admin/gallery/api/images')
                .then(response => response.json())
                .then(images => {
                    const imageGrid = document.getElementById('imageGrid');
                    imageGrid.innerHTML = '';
                    
                    images.forEach(image => {
                        const col = document.createElement('div');
                        col.className = 'col-md-3';
                        col.innerHTML = `
                            <div class="card image-card" style="cursor: pointer;" onclick="selectImage('${image}')">
                                <img src="/images/${image}" class="card-img-top" alt="${image}" style="height: 120px; object-fit: cover;">
                                <div class="card-body p-2">
                                    <small class="text-muted">${image}</small>
                                </div>
                            </div>
                        `;
                        imageGrid.appendChild(col);
                    });
                })
                .catch(error => {
                    console.error('加载图片失败:', error);
                    alert('加载图片失败，请重试');
                });
            
            // 显示模态框
            new bootstrap.Modal(document.getElementById('imageSelectorModal')).show();
        }

        function selectImage(imageName) {
            const imageUrl = `/images/${imageName}`;
            document.getElementById('imageUrl').value = imageUrl;
            
            // 显示预览
            document.getElementById('previewImg').src = imageUrl;
            document.getElementById('selectedImagePreview').style.display = 'block';
            
            // 关闭模态框
            bootstrap.Modal.getInstance(document.getElementById('imageSelectorModal')).hide();
        }

        // 页面加载时显示已有图片的预览
        document.addEventListener('DOMContentLoaded', function() {
            const imageUrl = document.getElementById('imageUrl').value;
            if (imageUrl) {
                document.getElementById('previewImg').src = imageUrl;
                document.getElementById('selectedImagePreview').style.display = 'block';
            }
        });
    </script>
</div>
</body>
</html> 